<template>
  <div class="audio" :style="{'width': w, 'height': h, 'font-size': fz}">
    <audio v-show="false" 
          controls 
          ref="audioHide"
          src="https://lvmhtest.xuexiwangzhe.com/public/course/941/864/GPOQwsBgbUIx8gSckUmjkqN92ARwZKjh.aac">
    </audio>
    <img class="play" @click="play" src="https://image.xuexiwangzhe.com/FgY7rvw1Ho6YjuqEyQ6a2t7FwwCH">
    <div class="audio-info">
      <div class="audio-name">
        英语晨练
      </div>
      <div class="audio-progress">
        <div class="audio-time" style="margin-right: 12px;">
          {{startTime}}
        </div>
        <mu-slider class="audio-slider" 
                    v-model="slider" 
                    :max="duration" 
                    :step="1" 
                    color="#265cff"
                    track-color="#999999"
                    thumb-color="#ffffff"
                    :display-value="false"
                    @change="changeSlider"
                    @drag-stop="mouseUpSlider"
        ></mu-slider>
        <div class="audio-time" style="margin-left: 14px;">
          {{ endTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDurationTime } from "util/common.js"

export default {
  props: {
    w: {
      type: String,
      default: '324px'
    },
    h: {
      type: String,
      default: '54px'
    },
    fz: {
      type: String,
      default: '12px'
    }
  },
  data() {
    return {
      slider: 10,
      endTime: '',
      startTime: '00:00',
      duration: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.duration = parseInt(this.$refs.audioHide.duration);
        this.endTime = this.getDuration(this.duration);
      }, 1000)
    })
  },
  methods: {
    // 获取进度条位置
    changeSlider(val) {
      this.startTime = this.getDuration(val);
    },
    mouseUpSlider(e, val) {
      this.$refs.audioHide.currentTime = val;
      this.$refs.audioHide.play();
      console.log(val)
    },
    // 开始播放
    play() {
      this.$refs.audioHide.play();
    },
    // 暂停播放
    pause() {
      this.$refs.audioHide.pause();
    },
    // 获取总共时间
    getDuration(during) {
      var obj = getDurationTime(during);
      return (obj.i < 10 ? '0' + obj.i : obj.i) + ':' + (obj.s < 10 ? '0' + obj.s : obj.s);
    }
  }
}
</script>

<style scoped>
  .audio {
    padding: 9px 18px;
    background: #D9E2FF;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  .play {
    width: 11.94%;
    cursor: pointer;
  }
  .audio-info {
    flex: 1;
    margin-left: 15px;
  }
  .audio-name {
    font-weight: 600;
    color: #333333;
  }
  .audio-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .audio-slider {
    margin-bottom: 0;
  }
  .audio-time {
    color: #333333;
  }
</style>